<template>
    <div class="container">
        <div style="display: flex">
            <el-input
                v-model="title"
                placeholder="标题"
                clearable
            />
            <el-button
                plain
                style="margin-left: 10px"
                @click="showMarkdown"
            >
                查看Markdown内容
            </el-button>
            <el-button
                plain
                @click="showHtml"
            >
                查看Html内容
            </el-button>
        </div>
        <markdown-editor
            v-model="text"
            height="91vh"
            style="margin-top: 8px"
            @htmlChange="htmlChange"
        />
        <el-dialog
            v-model="preview"
            :title="title"
            fullscreen
            center
            append-to-body
            destroy-on-close
        >
            <md-editor
                v-model="previewText"
                preview-only
                :style="{width: '100%', height: '85vh'}"
            />
        </el-dialog>
    </div>
</template>

<script>
import MdEditor from 'md-editor-v3';
import MarkdownEditor from '../../components/MarkdownEditor/Index';
export default {
    name: "Index",
    components: {MarkdownEditor, MdEditor},
    data() {
        return {
            text: '[TOC]\n' +
                '## md-editor-v3\n' +
                '\n' +
                'Markdown 编辑器，基于 vue3，使用 jsx 和 typescript 语法开发，支持切换主题、prettier 美化文本等。\n' +
                '\n' +
                '## 基本演示\n' +
                '\n' +
                '**加粗**，<u>下划线</u>，_斜体_，~删除线~，上标<sup>26</sup>，下标<sub>[1]</sub>，`inline code`，[超链接](https://imbf.cc)\n' +
                '\n' +
                '> 引用：世界上没有绝对，只有相对\n' +
                '\n' +
                '## 代码演示\n' +
                '\n' +
                '```js\n' +
                'import { defineComponent, ref } from "vue";\n' +
                'import MdEditor from "md-editor-v3";\n' +
                'import "md-editor-v3/lib/style.css";\n' +
                '\n' +
                '\n' +
                'export default defineComponent({\n' +
                '  name: "MdEditor",\n' +
                '  setup() {\n' +
                '    const text = ref("");\n' +
                '    return () => (\n' +
                '      <MdEditor modelValue={text.value} onChange={(v: string) => (text.value = v)} />\n' +
                '    );\n' +
                '  }\n' +
                '});\n' +
                '```\n' +
                '\n' +
                '## 文本演示\n' +
                '\n' +
                '依照普朗克长度这项单位，目前可观测的宇宙的直径估计值（直径约 930 亿光年，即 8.8 × 10<sup>26</sup> 米）即为 5.4 × 10<sup>61</sup>倍普朗克长度。而可观测宇宙体积则为 8.4 × 10<sup>184</sup>立方普朗克长度（普朗克体积）。\n' +
                '\n' +
                '## 表格演示\n' +
                '\n' +
                '| 昵称 | 猿龄（年） | 来自      |\n' +
                '| ---- | ---------- | --------- |\n' +
                '| 之间 | 3          | 中国-重庆 |\n' +
                '\n' +
                '## 占个坑@！',
            html: '',
            title: '标题',
            preview: false,
            previewText: '',
        }
    },
    methods: {
        showHtml() {
            this.preview = true;
            this.previewText = `\`\`\`html\n${this.html}\n\`\`\``;
        },
        showMarkdown() {
            this.preview = true;
            this.previewText = `\`\`\`markdown\n${this.text}\n\`\`\``;
        },
        htmlChange(e) {
            this.html = e;
        }
    }
}
</script>

<style scoped>
    .container {
        padding: 8px;
    }
</style>
